// 该组件就是循环便利路由数组得
import React from 'react'
import { Route, Switch, NavLink, Link, Redirect, BrowserRouter } from 'react-router-dom'
import { Suspense } from "react"  // 路由没加载出的loading
function RouterView(props) { // 函数组件在第一个形参props里就是父组件传递过来得数据
    //   console.log(props)
    let { RouterList } = props
    console.log(RouterList, 1111)
    let routerList = RouterList.filter((item, index) => {
        return !item.to
    })
    let redirect = RouterList.filter((item, index) => {
        return item.to
    })[0]
    console.log(routerList, 10000000000000000)
    console.log(redirect)
    return (
            <Suspense fallback={<div>...loading</div>}>
                <Switch>
                    {
                        routerList && routerList.length ? routerList.map((item, index) => {
                            // Route 标签上的render属性代替了以前一个一个写的Route标签上的component属性
                            // routerProps就是路由信息参数
                            return <Route path={item.path} key={index} render={(routerProps) => {
                                if (item.children) {
                                    return <item.component {...routerProps} child={item.children} title={item.children.filter(item => item.title)}></item.component>
                                }
                                return <item.component {...routerProps} title={item.title} send={"123456"} ></item.component>
                            }}></Route>
                        }) : "暂无路由"
                    }
                    {
                        redirect ? <Redirect to={redirect.to} from={redirect.from}></Redirect> : "暂无重定向"
                    }
                </Switch>
            </Suspense>

      

    )
}
export default RouterView
